<!-- 定时管控 -->
<template>
    <div>
        <div class="mainContent">
            <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick" class="elTabs">
                <el-tab-pane label="添加定时设置" name="first">
                    <div class="elTabsContent"><dsSet :data="item"></dsSet></div>
                </el-tab-pane>
                <el-tab-pane label="所有定时设置" name="second" lazy>
                    <div class="elTabsContent">
                        <allSetList
                            @useDetailRow="useDetailRow"
                            @editRow="editRow"
                            ref="allSetList"
                            @timedConfigurationRow="timedConfigurationRow"
                        ></allSetList>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="定时任务管理" name="third">
                    <div class="elTabsContent" :key="Math.random() * 10000">
                        <timeTask :timedata="item"></timeTask>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div v-if="dialogShow">
            <custom-dialog title="定时配置" size="max" @dialogClose="dialogShow = false">
                <timeConfig :timedata="item" @close="closeDialog"></timeConfig>
            </custom-dialog>
        </div>
    </div>
</template>

<script>
import customDialog from '@/components/customComponents/customDialog'
import {PopupCommon} from '@/libs/popupCommon'
import allSetList from './components/timeConfig/allSetList'
import dsSet from './components/timeConfig/dsSet.vue'
import timeConfig from './components/timeConfig/timeConfig'
import timeTask from './components/timeConfig/timeTask'
export default {
    components: {dsSet, allSetList, timeConfig, customDialog, timeTask},
    data() {
        return {
            activeName: 'first',
            item: {},
            dialogShow: false
        }
    },
    computed: {},
    created() {},
    methods: {
        closeDialog() {
            this.dialogShow = false
            PopupCommon.notify('success', '保存成功')
        },
        useDetailRow(d) {
            console.log(d)
            this.item = d
            this.activeName = 'third'
        },
        editRow(d) {
            console.log(d)
            this.item = d
            this.activeName = 'first'
        },
        timedConfigurationRow(d) {
            console.log(d, 'd..........1231231213')
            this.item = d
            this.dialogShow = true
        },
        handleClick(tab, event) {
            if (tab.name == 'second') {
                this.$refs.allSetList && this.$refs.allSetList.resizeWin()
            }
            if (tab.name != 'first') {
                this.item = {}
            }
            console.log(tab, event)
        }
    }
}
</script>

<style lang="scss" scoped>
.mainContent {
    background-color: #f5f5f5;
    height: calc(100vh - 115px);
    width: 100%;
    position: relative;
    .elTabs {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #f5f5f5;
        .elTabsContent {
            height: calc(100vh - 155px);
            text-align: left;
            overflow-y: auto;
            background: #f5f5f5;
        }
    }
    .el-tabs--border-card > .el-tabs__content {
        padding: 0;
    }
}
</style>
